<template>
	<div class="person">
		<input type="text" placeholder="姓名">
		<input type="text" placeholder="性别">
		<button>添加</button>
		<ul>
			<li v-for="person in persons" :key="person.id">
				姓名：{{person.name}} --- 性别：{{person.sex}}
			</li>
		</ul>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name:'Person',
		computed:{
			...mapState(['persons'])
		}
	}
</script>

<style scoped>
	.person{
		background-color: orange;
		padding: 20px;
	}
</style>